<template>
    <el-form ref="AccountFrom" :model="account" :rules="rules" label-position="left" label-width="0px" class="demo-ruleForm login-container">
        <h3 class="title">元通汽车金融管理系统</h3>
        <el-form-item prop="username">
            <el-input type="text" v-model="account.username" auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="pwd">
            <el-input type="password" v-model="account.pwd" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
        <el-form-item style="width:100%;">
            <el-button type="primary" style="width:100%;" @click.native.prevent="handleLogin" :loading="logining">登录</el-button>
            <p style="font-size:14px;color:red" v-show="LoginError">{{errorMessage}}</p>
        </el-form-item>
    </el-form>
</template>
<script>
//import NProgress from 'nprogress'
export default {
    data() {
        return {
            logining: false,
            LoginError: false,
            errorMessage: '账号/密码错误！',
            account: {
                username: '',
                pwd: ''
            },
            rules: {
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    //{ validator: validaePass }
                ],
                pwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    //{ validator: validaePass2 }
                ]
            },
            checked: true
        };
    },
    methods: {
        handleLogin() {
            this.$refs.AccountFrom.validate((valid) => {
                if (valid) {
                    this.logining = true;
                    var that = this;
                    console.log(this.account.username);
                    var loginParams = { 'username': this.account.username, 'password': this.account.pwd };
                    var formData = new FormData();
                    formData.append('username', this.account.username);
                    formData.append('password', this.account.pwd);
                    if (this.account.username == 'zhz') {
                        sessionStorage.setItem('access-user', JSON.stringify(this.account.username));
                        that.$router.push({ path: '/' });
                    }

                    this.$http.post("/login", formData)
                        .then((response) => {
                            console.log(response.data);
                            if (response.data.success == true) {
                                this.$store.state.token = response.headers['x-auth-token'];
                                this.$store.state.power = response.data.data.roleList[0].roleCode;
                                sessionStorage.setItem('access-user', JSON.stringify(this.account.username));
                                sessionStorage.setItem('token', response.headers['x-auth-token']);
                                sessionStorage.setItem('power', response.data.data.roleList[0].roleCode);
                                sessionStorage.setItem('staffId', response.data.data.staffId);
                                sessionStorage.setItem('userName',response.data.data.staffName)
                                var temp = []
                                this.$store.state.menuList=response.data.data.funcList
                                $.each(response.data.data.funcList,function(index,value){
                                    if(value.menuUrl!=null&value.menuUrl!=''){
                                        temp.push(value.menuUrl)
                                    }
                                })
                                sessionStorage.setItem('menuList', temp.toString())
                                if(response.data.data.roleList[0].roleCode=="ROLE_COOPERATIVE"){
                                    that.$router.push({ path: '/syntheticalInput' })
                                }else{
                                    that.$router.push({ path: temp[0] });
                                }
                            } else {
                                that.LoginError = true;
                            }
                        }).catch(function(response) {
                            that.LoginError = true;
                            console.log(response);
                        });
                    this.logining = false;
                }

            });
        }
    }
}

</script>
<style>
body {
    background: #5CACEE;
}

</style>
<style lang="scss" scoped>
.login-container {
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 160px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;

    background: -ms-linear-gradient(top, #fff, #6495ed);
    /* IE 10 */
    background: -moz-linear-gradient(top, #b8c4cb, #f6f6f8);
    /*火狐*/
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b8c4cb), to(#f6f6f8));
    /*谷歌*/
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#6495ed));
    /* Safari 4-5, Chrome 1-9*/
    background: -webkit-linear-gradient(top, #fff, #6495ed, #fff);
    /*Safari5.1 Chrome 10+*/
    background: -o-linear-gradient(top, #fff, #6495ed);
    /*Opera 11.10+*/
    .title {
        margin: 0px auto 40px auto;
        text-align: center;
        color: #505458;
    }
    .remember {
        margin: 0px 0px 35px 0px;
    }
}

</style>
